<template>
  <div style="margin-top: 0.5%;margin-left: 0.5%;">
        <el-card class="box-card">
   <Form @table="on" :pages="pages"></Form>
   <el-tabs type="card" v-model="activeName"  @tab-click="handleClick">
  <el-tab-pane label="全部"  name="3">

  </el-tab-pane>
  <el-tab-pane label="待审核" name="0" value="xxxxxxxx">

  </el-tab-pane>
  <el-tab-pane label="已审核" name='1'>

  </el-tab-pane>
  <el-tab-pane label="已拒绝" name='2'>

  </el-tab-pane>
</el-tabs>
 <el-alert type="info" style="margin-bottom: 15px;" show-icon :closable="false">数据一共{{counts}}条</el-alert>
  <!-- 表格 -->
  <el-table
    :data="tableData"
    type="index"
    style="width: 100%">
    <el-table-column
      prop="number"
      label="试题编号"
      width="150">
    </el-table-column>
    <el-table-column
      prop="subject"
      label="学科"
      width="120">
    </el-table-column>
    <el-table-column
      prop="catalog"
      label="目录"
      width="120">
    </el-table-column>
    <el-table-column
      prop="questionType"
      label="题型"
      width="120">
    </el-table-column>
    <el-table-column
      prop="question"
      label="题干"
      width="300">
<template slot-scope="scope">
<span v-html="scope.row.question"></span>
      </template>
    </el-table-column>
    <el-table-column
      prop="chkDate"
      label="录入时间"
      width="150">
    </el-table-column>
    <el-table-column
      prop="difficulty"
      label="难度"
      width="150">
    </el-table-column>
    <el-table-column
      prop="creator"
      label="录入人"
      width="120">
    </el-table-column>
    <el-table-column
      label="审核状态"
      width="120">
      <template slot-scope="scope">
{{
   scope.row.chkState === 0
                ? '待审核'
                : scope.row.chkState === 1
                ? '已审核'
                : '已拒绝'
}}
      </template>
    </el-table-column>
    <el-table-column
      prop="chkRemarks"
      label="审核意见"
      width="120">
    </el-table-column>
    <el-table-column
      prop="chkUser"
      label="审核人"
      width="120">

    </el-table-column>
    <el-table-column
      label="发布状态"
      width="120">
      <template slot-scope="scope">
        <span v-if="scope.row.chkState === 0 || scope.row.chkState === 2"
              >待发布</span
            >
            <span v-else-if="scope.row.publishState === 1">已发布</span>
            <span v-else-if="scope.row.publishState === 0">已下架</span>
      </template>
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="200"
      >
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="loadDetail(scope.row)">预览</el-button>
        <el-button type="text" size="small" @click="examine(scope.row)" :disabled="!!Number(scope.row.chkState!==0)" >审核</el-button>
        <el-button type="text" size="small" @click="edit(scope.row)" :disabled='!!scope.row.publishState'>修改</el-button>
        <el-button type="text" size="small" @click="grounding(scope.row)">{{scope.row.publishState===1? '下架' :'上架'}}</el-button>
        <el-button type="text" size="small"  :disabled='!!scope.row.publishState' @click="removelist(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
    <el-pagination
    background
    style="text-align: right;margin-top: 20px;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="this.pages.page"
      :page-sizes="[1, 2, 3,5]"
      :page-size="pages.pagesize"
      layout=" prev, pager, next,sizes, jumper"
      :total="counts"
      >
    </el-pagination>
        </el-card>
        <el-dialog
  title="题目预览"
  :visible.sync="dialogVisible"
  width="47%"
  @close="isClose"
  >
<detailDiglog
  :Detail="Detail"
  ref="close"
  :closeDialog="closeDialog"
  />
</el-dialog>

        <!-- 上下架的弹框 -->
        <el-dialog
         type="warning"
         width="30%">
 </el-dialog>
 <el-dialog  width="25%" title="题目审核" :visible.sync="examines">
   <el-radio v-model="radio" label="1" @input="Radio">通过</el-radio>
  <el-radio v-model="radio" label="2" @input="Radio">拒绝</el-radio>
<el-input
style="margin-top: 10%"
  type="textarea"
  :rows="2"
  placeholder="请输入审核意见"
  v-model="shenhe.chkRemarks">
</el-input>
 <div slot="footer" class="dialog-footer" style="text-align: right;">
      <el-button @click="examines = false">取 消</el-button>
      <el-button type="primary" @click="innerVisible">确定</el-button>
    </div>
 </el-dialog>
  </div>
</template>

<script>
// 根据名称获取对应的价格
import Form from '../components/topForm.vue'
// import Tables from '../components/tables.vue'
import { choice, choicePublish, choiceCheck, remove, detail } from '../../api/hmmm/questions'
import { difficulty, questionType } from '../../api/hmmm/constants'
// 导入组件
import detailDiglog from '.././components/questions-preview.vue'
// import { choice } from '../../api/hmmm/questions'
// 难度
function getDifficulty (aa) {
  const type = difficulty.find((item) => item.value === aa)
  return type ? type.label : '未知题型'
}
// 发布状态
// function getPublishType (aa) {
//   const type = publishType.find((item) => item.value - 1 === aa)
//   return type ? type.label : '未知题型'
// }
// 枚举题型
function getQuestionType (aa) {
  const type = questionType.find((item) => item.value === aa)
  return type ? type.label : '未知题型'
}
// 枚举难度的方法
function getDifficult (aa) {
  const type = difficulty.find((item) => item.value === aa)
  return type ? type.label : '未知难度'
}
// 枚举的方法
function getType (aa) {
  const type = questionType.find((item) => item.value === aa)
  return type ? type.label : '未知题型'
}
// 审核状态
// function getChkType (aa) {
//   const type = chkType.find((item) => item.value - 1 === aa)
//   return type ? type.label : '未知题型'
// }
// 时间转换函数
const fromTime = (timer) => {
  var jsonDate = new Date(timer).toJSON()
  return new Date(new Date(jsonDate) + 8 * 3600 * 1000)
    .toISOString()
    .replace(/T/g, ' ')
    .replace(/\.[\d]{3}Z/, '')
}
export default {
  components: { Form, detailDiglog },
  data () {
    return {
      num: '',
      keyword: '',
      Detail: {},
      shenhe: {
        id: '',
        chkState: 1,
        chkRemarks: ''
      },
      radio: '1',
      choicePublishs: {
        id: '',
        publishState: ''
      },
      // 弹框显示
      dialogVisible: false,
      examines: false,
      activeName: '3',
      // chkState: '',
      counts: 0, // 总数
      // 列表
      pages: {
        page: 1,
        pagesize: 5,
        // subjectID: '',
        keyword: ''
      },
      tableData: []
    }
  },
  created () {
    this.getList()
  },

  methods: {
    // 点击预览按钮显示弹层
    async loadDetail (row) {
      // // 打开弹层
      this.dialogVisible = true
      const { data } = await detail(row)
      // // 给弹层准备数据
      this.Detail = data
      // // 获取题目类型的枚举数据
      this.Detail.questionType = getType(+this.Detail.questionType)
      // // 获取题目难度的枚举数据
      this.Detail.difficulty = getDifficult(+this.Detail.difficulty)
    },
    // 关闭视频
    isClose () {
      this.$refs.close.close()
    },
    // 关闭弹层
    closeDialog () {
      this.dialogVisible = false
    },
    handleCurrentChange (val) {
      this.pages.page = val
      this.getList()
    },
    // 监听页数
    handleSizeChange (val) {
      this.pages.pagesize = val
      this.getList()
    },
    removelist (row) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(row)
        this.getList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 修改
    async edit (row) {
      this.$router.push(`new?id=${row.id}`)
    },
    // 审核
    async  innerVisible () {
      if (this.shenhe.chkRemarks === '') {
        this.$message({
          type: 'info',
          message: '请输入审核意见'
        })
        return
      }
      await choiceCheck(this.shenhe)
      this.examines = false
      this.getList()
      this.shenhe.chkRemarks = ''
    },
    Radio (label) {
      this.shenhe.chkState = +label
    },
    examine (row) {
      this.examines = true
      this.shenhe.id = row.id
    },
    // 上下架
    grounding (row) {
      this.$confirm(this.choicePublishs.publishState === 1 ? '您确认下架这道题目吗!' : '您确认上架这道题目吗!', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.choicePublishs.id = row.id
        this.choicePublishs.publishState = row.publishState === 0 ? 1 : 0
        await choicePublish(this.choicePublishs)
        this.getList()
        this.$message(this.choicePublishs.publishState !== 1 ? '下架成功!' : '上架成功!')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删上架'
        })
      })
    },

    //   -----------_--------
    //   this.$confirm(row.publishState === 0 ? '您确认上架这道题目吗' : '您确认下架这道题目吗')
    //     .then(async () => {

    //     })
    //     .catch(_ => {})
    // },

    // 根据审核获取列表
    handleClick (tab) {
      if (tab._props.name === '3') {
        if (this.pages.subjectID === 'undefined' || this.pages.keyword === 'undefined') {
          this.pages = {
            page: 1,
            pagesize: 5
          }
        } else {
          this.pages = {
            page: 1,
            pagesize: 5,
            subjectID: this.num,
            keyword: this.keyword
          }
        }
      } else {
        this.pages.chkState = tab._props.name
      }
      this.getList()
    },
    // 获取列表
    async getList () {
      if (this.pages.subjectID === '' && this.pages.keyword === '') {
        this.pages = {
          page: 1,
          pagesize: 5
        }
      } else if (this.pages.subjectID === '' && this.pages.keyword !== '') {
        console.log(5555)
        this.pages = {
          page: 1,
          pagesize: 5,
          keyword: this.keyword
        }
      }
      const { data } = await choice(this.pages)
      // 总条数
      this.counts = data.counts
      data.items.forEach(item => {
        // 难度
        item.difficulty = getDifficulty(+item.difficulty)
        // 发布状态
        // item.publishState =
        // 枚举题型
        item.questionType = getQuestionType(+item.questionType)
        // 审核状态
        // item.chkState = getChkType(+item.chkState)
        // 转换时间
        item.chkDate = fromTime(item.chkDate)
      })
      this.tableData = data.items
    },
    // 子组件穿过来的数据
    async on (val) {
      if (val.subjectID === '' && val.keyword === '') {
        val = {}
        console.log(89789789)
      }
      this.pages = { ...this.pages, ...val }
      this.num = val.subjectID
      this.keyword = val.keyword
      console.log(this.keyword)
      console.log(this.pages)
      if (this.pages.page !== 1) this.pages.page = 1
      this.getList()
      // console.log(this.pages.page)
      // const { data } = await choice(this.pages)
      // this.counts = data.counts
      // this.tableData = data.items
      // data.items.forEach(item => {
      //   // 难度
      //   item.difficulty = getDifficulty(+item.difficulty)
      //   // 发布状态
      //   // item.publishState =
      //   // 枚举题型
      //   item.questionType = getQuestionType(+item.questionType)
      //   // 审核状态
      //   // item.chkState = getChkType(+item.chkState)
      //   // 转换时间
      //   item.chkDate = fromTime(item.chkDate)
      // })
    }
  }
}
</script>

<style scoped lang='less'>

</style>
